<template>
  <div class="control-box">
    <div
      class="control-item top"
      @click.stop="handleChangeDirection('top')"
      @mousedown.stop="handleAutoDirection('top')"
      @mouseup.stop="handleAutoStopDirection"
    ></div>
    <div
      class="control-item left"
      @click.stop="handleChangeDirection('left')"
      @mousedown.stop="handleAutoDirection('left')"
      @mouseup.stop="handleAutoStopDirection"
    ></div>
    <div
      class="control-item bottom"
      @mousedown.stop="handleAutoDirection('bottom')"
      @mouseup.stop="handleAutoStopDirection"
      @click.stop="handleChangeDirection('bottom')"
    ></div>
    <div
      class="control-item right"
      @mousedown.stop="handleAutoDirection('right')"
      @mouseup.stop="handleAutoStopDirection"
      @click.stop="handleChangeDirection('right')"
    ></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted,onUnmounted } from "vue";
import * as hooks from "@/hooks/useTestHooks";
const handleChangeDirection = (type: string) => {
  if (timer) {
    clearInterval(timer);
  }
  hooks.useHandleChangeOperate(type);
};
let timer: any = null;
const handleAutoDirection = (type: string) => {
  if (timer) {
    clearInterval(timer);
  }

  timer = setInterval(() => {
    hooks.useHandleChangeOperate(type);
  }, 100);
};
const handleAutoStopDirection = () => {
  clearInterval(timer);
};
onMounted(() => {
});
onUnmounted(() => {
  clearInterval(timer);
});
</script>
<style lang="less" scoped>
.control-box {
  width: 276px;
  height: 200px;
  background: #f2f3f5;
  border-radius: 8px;
  position: relative;
  .control-item {
    position: absolute;
    cursor: pointer;
    &.top {
      top: 36px;
      left: 118px;
      height: 60px;
      width: 40px;
      background: url(@/assets/common/icon-control-top.png) no-repeat;
      background-size: 100% 100%;
      &:hover {
        background: url(@/assets/common/icon-control-top-cur.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    &.right {
      top: 80px;
      left: 142px;
      width: 60px;
      height: 40px;
      background: url(@/assets/common/icon-control-right.png) no-repeat;
      background-size: 100% 100%;
      &:hover {
        background: url(@/assets/common/icon-control-right-cur.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    &.bottom {
      top: 104px;
      left: 118px;
      height: 60px;
      width: 40px;
      background: url(@/assets/common/icon-control-bottom.png) no-repeat;
      background-size: 100% 100%;
      &:hover {
        background: url(@/assets/common/icon-control-bottom-cur.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    &.left {
      top: 80px;
      left: 74px;
      width: 60px;
      height: 40px;
      background: url(@/assets/common/icon-control-left.png) no-repeat;
      background-size: 100% 100%;
      &:hover {
        background: url(@/assets/common/icon-control-left-cur.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
